<template>
  <div class="factory-dashboard">
    <dv-border-box-11 class="dashboard-container" title="数据可视化">
      <div class="dashboard-header">
        <h1>智造云枢生产概览</h1>
        <div class="dashboard-time">{{ currentTime }}</div>
      </div>
      
      <div class="dashboard-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <production-summary :production-data="productionData" />
          </el-col>
        </el-row>
        
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="12">
            <device-health :device-data="deviceData" />
          </el-col>
          <el-col :span="12">
            <quality-metrics :quality-data="qualityData" />
          </el-col>
        </el-row>

        <!-- <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <energy-consumption :energy-data="energyData" />
          </el-col>
        </el-row> -->

        <el-row :gutter="20" style="margin-top: 30px;">
          <el-col :span="8">
            <material-inventory :inventory-data="inventoryData" />
          </el-col>
          <el-col :span="8">
            <order-tracking :order-data="orderData" />
          </el-col>
          <el-col :span="8">
            <production-line-monitoring :production-line-data="productionLineData" />
          </el-col>
        </el-row>

        <!-- <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <order-tracking :order-data="orderData" />
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <production-line-monitoring :production-line-data="productionLineData" />
          </el-col>
        </el-row> -->

        <el-row :gutter="20" style="margin-top: 60px;">
          <el-col :span="24">
            <production-trend-analysis :trend-data="trendData" />
          </el-col>
        </el-row>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import ProductionSummary from './ProductionSummary.vue'
import DeviceHealth from './DeviceHealth.vue'
import QualityMetrics from './QualityMetrics.vue'
// import EnergyConsumption from './EnergyConsumption.vue'
import MaterialInventory from './MaterialInventory.vue'
import OrderTracking from './OrderTracking.vue'
import ProductionLineMonitoring from './ProductionLineMonitoring.vue'
import ProductionTrendAnalysis from './ProductionTrendAnalysis.vue'

// 当前时间
const currentTime = ref('')
let timer = null

// 模拟数据 - 实际项目中会从API获取
const productionData = ref({
  planCount: 1500,
  completedCount: 1150,
  ongoingOrders: 12,
  delayedOrders: 2,
  completionRate: 76.7
})

const deviceData = ref({
  total: 48,
  running: 42,
  idle: 3,
  maintenance: 2,
  fault: 1,
  utilizationRate: 87.5
})

const qualityData = ref({
  inspected: 1150,
  qualified: 1080,
  defective: 70,
  qualityRate: 93.9,
  defectCategories: [
    { name: '尺寸偏差', value: 32 },
    { name: '表面瑕疵', value: 21 },
    { name: '材质问题', value: 12 },
    { name: '其他', value: 5 }
  ]
})

const energyData = ref({
  electricity: 8000,
  water: 29640,
  carbon: 1750724
})

// 模拟物料库存数据
const inventoryData = ref([
  { material: '钢材', quantity: 500, threshold: 200 },
  { material: '塑料', quantity: 150, threshold: 100 },
  { material: '电子元件', quantity: 300, threshold: 150 },
  { material: '化学品', quantity: 50, threshold: 80 }
])

// 模拟订单数据
const orderData = ref([
  { orderId: 'ORD001', customer: '客户A', status: 'pending', quantity: 100, deliveryDate: '2023-05-20' },
  { orderId: 'ORD002', customer: '客户B', status: 'in_progress', quantity: 200, deliveryDate: '2023-05-22' },
  { orderId: 'ORD003', customer: '客户C', status: 'completed', quantity: 150, deliveryDate: '2023-05-18' },
  { orderId: 'ORD004', customer: '客户D', status: 'delayed', quantity: 50, deliveryDate: '2023-05-25' }
])

// 模拟生产线数据
const productionLineData = ref([
  { lineId: '线1', status: 'running', currentOutput: 300, targetOutput: 500, efficiency: '60%' },
  { lineId: '线2', status: 'in_progress', currentOutput: 200, targetOutput: 400, efficiency: '50%' },
  { lineId: '线3', status: 'running', currentOutput: 450, targetOutput: 600, efficiency: '75%' },
  { lineId: '线4', status: 'delayed', currentOutput: 100, targetOutput: 300, efficiency: '33%' }
])

// 模拟趋势数据
const trendData = ref([
  { date: '2023-05-01', output: 200 },
  { date: '2023-05-02', output: 300 },
  { date: '2023-05-03', output: 250 },
  { date: '2023-05-04', output: 400 },
  { date: '2023-05-05', output: 350 },
  { date: '2023-05-06', output: 450 },
  { date: '2023-05-07', output: 500 }
])

// 格式化当前时间
const updateTime = () => {
  const now = new Date()
  const year = String(now.getFullYear())
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  
  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.factory-dashboard {
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  background-color: #001529;
  color: #fff;
  background-image: url('../assets/images/bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.dashboard-container {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-header h1 {
  font-size: 24px;
  color: #fff;
  margin: 0;
}

.dashboard-time {
  font-size: 16px;
  color: #8dc4ff;
  background-color: rgba(0, 20, 40, 0.5);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(41, 182, 255, 0.3);
}

.dashboard-content {
  padding: 10px 0;
}
</style> 